<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas实现图片显示</title>
</head>
<body>
<canvas id="canvas" width="640px" height="360px"></canvas>

<script>
    window.onload = () => {

        // 创建一个图片元素
        const img = new Image();
        img.src = "./assets/641.webp";

        // 创建canvas
        const canvas = document.getElementById("canvas");
        const cvsWidth = canvas.width;
        const cvsHeight = canvas.height;
        const ctx = canvas.getContext("2d");

        // 在图片加载完成后绘制到canvas上
        img.onload = () => {
            ctx.clearRect(0, 0, cvsWidth, cvsHeight);
            ctx.drawImage(img, 0, 0, cvsWidth, cvsHeight);
        };
    };
</script>
</body>
</html>
